<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>pop-cookie</title>
	<style type="text/css">
		body{
			margin:0;
		}

		.pop{
			width:400px;
			height:300px;
			background-color:#fff;
			border:1px solid #ccc;
			position:fixed;
			left:50%;
			top:50%;
			margin-left:-200px;
			margin-top:-250px;
			z-index:9999;
			opacity:0;
			filter:alpha(opacity=0);

		}

		.pop span{
			float:right;
			font-size:30px;
			cursor:pointer;
		}

		.mask{
			width:100%;
			height: 100%;
			background-color:#000;
			opacity:0.6;
			filter:alpha(opacity=60);
			position:fixed;
			z-index:9990;
			left:0;
			top:0	
		}
		.pop_con{
			display:none;
		}

		.hasknow{
			text-align:center;
			cursor:pointer;
			margin-top:100px;
		}
	</style>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript">
		$(function(){

			var read = $.cookie('hasread');

			//alert(read);

			if(read==undefined)
			{
				$('.pop_con').show();
				$('.pop').animate({marginTop:-150,opacity:1});				
			}

			$('.hasknow').click(function() {

				$.cookie('hasread','ok',{expires:7,path:'/'});
				$('.pop_con').hide();

			});


			
		})

	</script>
</head>
<body>
	
	<div class="pop_con">
		<div class="pop">
			<span>×</span>
			<p>我们网站有优惠，赶紧行动吧！亲！</p>
			<p class="hasknow">我知道了</p>
		</div>
		<div class="mask"></div>
	</div>

	<h1>网站首页</h1>
</body>
</html>